<template>
  <view class="goods-list">
    <view class="search-box" v-if="shopSearch">
      <view @click="goSearchPage" class="search">
        <text>{{ searchValue ? searchValue : '请输入关键词' }}</text>
        <text class="icon-search"></text>
      </view>
    </view>
    <view class="toolbar">
      <uni-row class="demo-uni-row">
        <uni-col :span="6" @click="handleDefault()">
          <view style="text-align: left">默认</view>
        </uni-col>
        <uni-col :span="6">
          <uni-row class="demo-uni-row" @click="handleSort('priceSort')">
            <uni-col :span="12">
              <view style="text-align: right">价格</view>
            </uni-col>
            <uni-col :span="2">
              <view style="line-height: 16rpx">
                <text
                  style="font-size: 5rpx"
                  :style="{ color: pageParams.priceSort === 3 ? '#27ba9b' : '#c4c4c4' }"
                >
                  &#9650;
                </text>
              </view>
              <view style="line-height: 0rpx">
                <text
                  style="font-size: 5rpx"
                  :style="{ color: pageParams.priceSort === 2 ? '#27ba9b' : '#c4c4c4' }"
                >
                  &#9660;
                </text>
              </view>
            </uni-col>
          </uni-row>
        </uni-col>
        <uni-col :span="6" @click="handleSort('salesSort')">
          <uni-row class="demo-uni-row">
            <uni-col :span="16">
              <view style="text-align: right">销量</view>
            </uni-col>
            <uni-col :span="2">
              <view style="line-height: 16rpx">
                <text
                  style="font-size: 5rpx"
                  :style="{ color: pageParams.salesSort === 3 ? '#27ba9b' : '#c4c4c4' }"
                >
                  &#9650;
                </text>
              </view>
              <view style="line-height: 0rpx">
                <text
                  style="font-size: 5rpx"
                  :style="{ color: pageParams.salesSort === 2 ? '#27ba9b' : '#c4c4c4' }"
                >
                  &#9660;
                </text>
              </view>
            </uni-col>
          </uni-row>
        </uni-col>
        <uni-col :span="6">
          <uni-row class="demo-uni-row" style="text-align: right" @click="handleSort('newSort')">
            <uni-col :span="22">
              <view>上新</view>
            </uni-col>
            <uni-col :span="2">
              <view style="line-height: 16rpx">
                <text
                  style="font-size: 5rpx"
                  :style="{ color: pageParams.newSort === 3 ? '#27ba9b' : '#c4c4c4' }"
                >
                  &#9650;
                </text>
              </view>
              <view style="line-height: 0rpx">
                <text
                  style="font-size: 5rpx"
                  :style="{ color: pageParams.newSort === 2 ? '#27ba9b' : '#c4c4c4' }"
                >
                  &#9660;
                </text>
              </view>
            </uni-col>
          </uni-row>
        </uni-col>
      </uni-row>
    </view>
    <view class="guess">
      <navigator
        class="guess-item"
        v-for="item in guessList"
        :key="item.productId"
        :url="`/pages/goods/goods?id=${item.productId}`"
      >
        <image class="image" mode="aspectFill" :src="item.imageUrl"></image>
        <view class="name"> {{ item.productName }} </view>
        <view class="price">
          <text class="small">¥</text>
          <text>{{ item.price }}</text>
        </view>
      </navigator>
    </view>
    <view class="loading-text">
      {{ finish ? '没有更多数据~' : '正在加载...' }}
    </view>
  </view>
</template>
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { getGoodsListAPI } from '@/services/goods'

const { safeAreaInsets } = uni.getSystemInfoSync()

// 获取页面栈
const pages = getCurrentPages()

// 分页参数
const pageParams = ref<any>({
  page: 1,
  pageNum: 10,
  searchValue: '',
  priceSort: 1, //1-默认、2-降序、3-升序
  salesSort: 1, //1-默认、2-降序、3-升序
  newSort: 1, //1-默认、2-降序、3-升序
  platformCategoryIds: query.categoryId,
})
const shopSearch = computed(() => {
  return typeof query.categoryId === 'undefined'
})

// 接收页面参数
const query = defineProps<{
  categoryId: string
  searchValue: string
}>()

// 猜你喜欢的列表
const guessList = ref<any[]>([])
// 已结束标记
const finish = ref(false)

const handleDefault = async () => {
  pageParams.value.priceSort = 1
  pageParams.value.salesSort = 1
  pageParams.value.newSort = 1
  resetData()
  getHomeGoodsGuessLikeData()
}

const handleSort = async (type: string) => {
  if (pageParams.value[type] === 3) {
    pageParams.value[type] = 0
  }
  pageParams.value[type] += 1
  resetData()
  getHomeGoodsGuessLikeData()
}

const goSearchPage = async () => {
  uni.redirectTo({
    url: `/pages/goods/search?from=goods&value=${query.searchValue}`,
  })
}

const getHomeGoodsGuessLikeData = async () => {
  // 退出分页判断
  if (finish.value === true) {
    return
  }
  pageParams.value.searchValue = query.searchValue
  const res = await getGoodsListAPI(pageParams.value)
  // guessList.value = res.data.items
  // 数组追加
  guessList.value.push(...res.rows)
  // 分页条件
  if (guessList.value.length < res.total) {
    // 页码累加
    pageParams.value.page++
  } else {
    finish.value = true
  }
}
// 重置数据
const resetData = () => {
  pageParams.value.page = 1
  guessList.value = []
  finish.value = false
}
// 组件挂载完毕
onMounted(() => {
  getHomeGoodsGuessLikeData()
})
// 暴露方法
defineExpose({
  resetData,
  getMore: getHomeGoodsGuessLikeData,
})
</script>

<style lang="scss" scoped>
:host {
  display: block;
}

.goods-list {
  background-color: #f7f7f7;
  min-height: 100vh;
}
.search-box {
  padding-top: 4rpx;
  padding-bottom: 4rpx;
  background-color: #27ba9b;
  color: #ffffff;

  .search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10rpx 0 26rpx;
    height: 64rpx;
    margin: 16rpx 20rpx;
    color: #fff;
    font-size: 28rpx;
    border-radius: 32rpx;
    background-color: rgba(255, 255, 255, 0.5);
  }
  .icon-search {
    &::before {
      margin-right: 10rpx;
    }
  }
}
.toolbar {
  text-align: center;
  padding: 20rpx 80rpx;
  margin-bottom: 20rpx;
  background-color: #ffffff;
  color: #797979;
}

/* 分类标题 */
.caption {
  display: flex;
  justify-content: center;
  line-height: 1;
  padding: 36rpx 0 40rpx;
  font-size: 32rpx;
  color: #262626;
  .text {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 28rpx 0 30rpx;

    &::before,
    &::after {
      content: '';
      width: 20rpx;
      height: 20rpx;
      background-image: url(@/static/images/bubble.png);
      background-size: contain;
      margin: 0 10rpx;
    }
  }
}

/* 猜你喜欢 */
.guess {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20rpx;
  .guess-item {
    width: 345rpx;
    padding: 24rpx 20rpx 20rpx;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
    overflow: hidden;
    background-color: #fff;
  }
  .image {
    width: 304rpx;
    height: 304rpx;
  }
  .name {
    height: 75rpx;
    margin: 10rpx 0;
    font-size: 26rpx;
    color: #262626;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .price {
    line-height: 1;
    padding-top: 4rpx;
    color: #cf4444;
    font-size: 26rpx;
  }
  .small {
    font-size: 80%;
  }
}
// 加载提示文字
.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0;
}
.sort-up {
  width: 0;
  height: 0;
  border-top: 15rpx solid transparent;
  border-right: 15rpx solid transparent;
  border-left: 15rpx solid transparent;
  border-bottom: 15rpx solid #979797;
}
</style>
